@import "variable";
.btn {
    height: @size * 2 / 3;
    line-height: @size * 2 / 3;
    padding: 0 @space;
    border: none;
    border-radius: @space / 2;
    font-size: @normal;
    color: #656b79;
    background-color: #fff;
    .border();
    letter-spacing: @space / 4;
    font-size: @big;
    display: inline-block;
    position: relative;
    cursor: pointer;
    text-align: center;
    &.not-bg {
        background-color: #fff;
    }
    &.btn-full {
        height: @size * 3 / 4;
        line-height: @size * 3 / 4;
        width: 94%;
        margin: @space 3%;
        letter-spacing: @space / 2;
        font-size: @x-big;
    }
    &.btn-small {
        height: @size / 2;
        line-height: @size / 2;
        padding: 0 @space / 2;
        font-size: @normal;
        letter-spacing: normal;
    }
    &.not-radius {
        border-radius: 0;
    }
    &.btn-orange {
        color: #fff;
        border-color: @orange;
        background-color: @orange;
        &.btn-disabled {
            background-color: lighten(@orange, 20%);
        }
        &.not-bg {
            color:  @orange;
            background-color: #fff;
        }
    }
    &.btn-blue {
        color: #fff;
        border-color: @blue;
        background-color: @blue;
        &.btn-disabled {
            background-color: lighten(@blue, 10%);
        }
        &.not-bg {
            color:  @blue;
            background-color: #fff;
        }
    }
    &.btn-green {
        color: #fff;
        border-color: @green;
        background-color: @green;
        &.btn-disabled {
            background-color: lighten(@green, 20%);
        }
        &.not-bg {
            color:  @green;
            background-color: #fff;
        }
    }
    &.btn-red {
        color: #fff;
        border-color: @red;
        background-color: @red;
        &.btn-disabled {
            background-color: lighten(@red, 20%);
        }
        &.not-bg {
            color:  @red;
            background-color: #fff;
        }
    }
    i {
        margin-right: @space / 2;
        font-size: inherit;
    }
    &:disabled{
        color: #fff;
        background-color: #ccc;
        cursor: no-drop;
        border-color: #ccc;
    }
    &.btn-disabled {
        color: #bbb;
        background-color: #eee;
        cursor: no-drop;
        border-color: #eee;
    }
}